<template>
<view>
	<!-- 展示当天的统计数据 -->
	<u-alert 
		:title="`当日总收款${data.totalCollect}元，总支出${data.totaFees}元，总利润${data.totalProfit}元`"  
		type="warning" 
		center
		description=""
	></u-alert>
	<!-- 展示当天的所有订单记录 -->
	<u-collapse>
	    <u-collapse-item
			v-for="item in data.list"
			:title="`[${orderTypeFilter(item.type)}] `+item.hanfuName"
			:value="dynastyFilter(item.dynasty)"
			:label="$u.timeFormat(item.timestamp, 'yyyy年mm月dd日 hh:MM:ss')"
	    >
			<view class="itemCon">
				<OrderItem :item="item"></OrderItem>
				<view class="positionBtn" @click="deleteRecord(item)">删除</view>
			</view>
	    </u-collapse-item>
	</u-collapse>
</view>
</template>

<script setup>
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { getJsonData, changeData } from '@/utils/file'
import { dynastyFilter, orderType, orderTypeFilter, numFilter } from '@/utils/data'
import OrderItem from '@/components/OrderItem'
import { remove } from 'lodash-es'

const data = reactive({
	list: [],
	totalCollect: 0,
	totaFees: 0,
	totalProfit: 0
})
let path = '';

function deleteRecord(item){
	uni.showModal({
		title: '温馨提示',
		content: `请确认是否要删除当前选中的历史订单, [${orderTypeFilter(item.type)}]${item.hanfuName}, 删除后无法恢复？`,
		success(res){
			if (res.confirm) {
				data.list = remove(data.list, (li)=>item.timestamp!==li.timestamp)
				let totalCollect = 0, totaFees = 0;
				for(let item of data.list){
					totalCollect += Number(item.price)
					totaFees += Number(item.makeupFees)
				}
				data.totalProfit = numFilter(totalCollect - totaFees)
				data.totalCollect = numFilter(totalCollect)
				data.totaFees = totaFees
				// 同步数据到本地文件
				changeData(path, 0, toRaw(data))
			}
		}
	})
}

onLoad((option)=>{
	path = option.path;
	getJsonData(path).then(res=>{
		data.list = res.list
		data.totalCollect = res.totalCollect
		data.totaFees = res.totaFees
		data.totalProfit = res.totalProfit
	})
})
</script>

<style lang="scss" scoped>
.itemCon{
	position: relative;
	.positionBtn{
		position: absolute;
		top: 140rpx;
		left: 0rpx;
		width: 180rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: rgba(0,0,0, 0.6);
		color: #ccc;
	}
}

</style>